<template>
  <view class="con">
    <u-navbar auto-back :title="name" bgColor="#fff"></u-navbar>
    <scroll-view :scroll-top="scrollTopHeight" scroll-y="true" class="chatList" :style="{ height: pageHeight }" scroll-with-animation="true">
      <view :class="{ msgItem: true, my: item.userId === userInfo.id }" v-for="(item, index) in msgList" :key="index">
        <image :src="item.avatar" mode="scaleToFill" />
        <view class="text">{{ item.content }}</view>
      </view>
    </scroll-view>
    <view class="plInputBox" :style="{ bottom: bottomVal }">
      <view class="input">
        <u-textarea
          border="none"
          :adjust-position="false"
          :cursor-spacing="20"
          v-model="plInfo"
          auto-height
          :showConfirmBar="false"
          :holdKeyboard="true"
          @blur="inputBindBlur"
          placeholder="请输入描述"
          @focus="inputBindFocus"
        />
      </view>
      <view class="btnBox" @click="postComments"> 发布 </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { getHistory, sendMsg } from "@/api/home";
import { onMounted, ref } from "vue";
const { id, name } = defineProps<{
  id: string;
  name: string;
}>();
const plInfo = ref();
const bottomVal = ref();
const msgList = ref<any[]>([]);
const scrollTopHeight = ref(0);
const userInfo: myTypes.userInfo = uni.getStorageSync("userInfo");
const pageHeight = ref("");
const currentID = ref("");
onMounted(async () => {
  const res = await getHistory({ id });
  msgList.value = res.data.messageList || [];
  currentID.value = res.data.sessionNo;
});
const inputBindFocus = (e: any) => {
  bottomVal.value = e.detail.height + "px";
  pageHeight.value = `calc(100vh - 110px - ${e.detail.height}px)`;
};
const inputBindBlur = () => {
  bottomVal.value = 0 + "px";
  pageHeight.value = "calc(100vh - 110px)";
};
const postComments = async () => {
  if (plInfo.value) {
    try {
      await sendMsg({
        sessionNo: currentID.value,
        content: plInfo.value,
        toUserId: id,
      });
      msgList.value.push({
        content: plInfo.value,
        avatar: userInfo.avatar,
        userId: userInfo.id,
      });
    } catch (error) {
      uni.showToast({
        title: "发送失败",
        icon: "none",
      });
    }
    scrollTopHeight.value = msgList.value.length * 300;
    plInfo.value = "";
  }
};
</script>

<style lang="less" scoped>
.con {
  overflow: hidden;
  height: 100vh;
}
.chatList {
  margin-top: 120rpx;
  width: 100%;
  box-sizing: border-box;
  // height: calc(100vh - 110px);
  background: #f7f7f7;
  padding: 20rpx 32rpx;
  padding-top: 60rpx;
}
.msgItem {
  display: flex;
  align-items: center;
  margin-bottom: 50rpx;
  justify-content: flex-start;
  image {
    width: 88rpx;
    height: 88rpx;
    border-radius: 50%;
    background: salmon;
  }
  .text {
    max-width: 400rpx;
    background: #ffffff;
    border-radius: 0rpx 16rpx 16rpx 16rpx;
    margin-left: 20rpx;
    padding: 16rpx;
    font-size: 32rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #1e1e1e;
    line-height: 48rpx;
  }
}
.my {
  flex-direction: row-reverse;
  .text {
    margin-right: 20rpx;
    background: #1676fd;
    border-radius: 16rpx 0rpx 16rpx 16rpx;
    color: #fff;
  }
}
.plInputBox {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 10rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  padding-bottom: 40rpx;
  .input {
    width: 84%;
    background: #f7f7f7;
    /deep/ .u-textarea {
      background: #f7f7f7;
    }
  }
  .btnBox {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 18%;
  }
}
</style>
